<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
  <base href="<%=basePath%>">
  <meta charset="UTF-8" name="viewport" content="initial-scale=1.0, user-scalable=no">
  <title>编辑失物招领</title>
  <link rel="shortcut icon" href="static/image/logo01.ico"/>
  <link href="static/easyui/themes/default/easyui.css" rel="stylesheet" />
  <link href="static/easyui/themes/icon.css" rel="stylesheet" />
  <script type="text/javascript" src="static/easyui/jquery.min.js"></script>
  <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<%
  String id = request.getParameter("id");
%>
<div data-options="region:'west'" style="width:50%;">
  <table>
    <tr>
      <td>物品类别：</td>
      <td>
        <select class="easyui-combobox" name="goodsType" id="goodsType" style="width: 200px;"></select>
      </td>
    </tr>
    <tr>
      <td>拾取时间：</td>
      <td><input class="easyui-datetimebox" id="lossTime"
                 data-options="" style="width: 200px"></td>
    </tr>
    <tr>
      <td style="vertical-align:top">拾取位置：</td>
      <td ><a id="selectLocation" class="easyui-linkbutton"
              data-options="iconCls:'icon-search'">选择位置</a>先点击右侧地图的确认按钮，再点击此确认按钮<br />
        <input class="easyui-textbox" type="text" name="lng" id="lng" data-options="editable:false"></input>经度
        <br/>
        <input class="easyui-textbox" type="text" name="lat" id="lat" data-options="editable:false"></input>纬度
        <br/>
        <input class="easyui-textbox" type="text" value="" name="lossLocation" id="lossLocation" data-options="editable:false" style="width: 500px"></input>地点
      </td>
    </tr>
    <tr>
      <td style="vertical-align:top">详情：</td>
      <td><input class="easyui-textbox" id="description" data-options="multiline:true" style="width:400px;height:100px"></input></td>
    </tr>
    <tr>
      <td>上传照片：</td>
      <td><input class="easyui-filebox" id="file" name="file" data-options="buttonText:'选择文件'" style="width:300px">
        若不上传，则默认不更新图片
        <br/>
        <label id="fileName"></label>
      </td>
    </tr>
    <tr>
      <td><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="submit()" >提交</a></td>
    </tr>
  </table>
</div>
<div data-options="region:'center'" style="padding:20px">
  <iframe class="map-iframe" src="manage/amap.jsp" frameborder="no"   border="no" height="100%" width="100%" scrolling="auto"></iframe>
</div>



<script>
  $(function() {
    // 页面进来加载物品类别下拉条
    $.ajax({
      type: "get",
      url: "goodsType/list",
      success: function(response) {
        $('#goodsType').combobox({
          data: response.data,
          valueField: 'id',
          textField: 'name'
        });
        // 加载失物招领信息
        $.ajax({
          type: "get",
          url: "find/get.do",
          data: {id: "<%=id%>"},
          success: function(response) {
            console.log(response);
            $('#goodsType').combobox('setValue', response.data.goodsTypeId);
            $('#lossTime').datetimebox('setValue', response.data.findTime);
            $('#lng').textbox('setValue', response.data.lng);
            $('#lat').textbox('setValue', response.data.lat);
            $('#lossLocation').textbox('setValue', response.data.address);
            $('#description').textbox('setValue', response.data.description);
          }
        })
      }
    })
    // 点击拾取位置 在文本框添加经纬度和位置信息
    $('#selectLocation').bind('click', function(){
      // 从localStorage中获取
      $('#lng').textbox('setValue', localStorage.lng);
      $('#lat').textbox('setValue', localStorage.lat);
      $('#lossLocation').textbox('setValue', localStorage.address);
    });
    // 用户上传图片事件
    $('#file').filebox({'onChange': function(e) {
        // 获取到文件对象
        var file0 = $("#file").filebox("files")[0];
        var formData = new FormData();
        formData.append("file", file0);
        // 将文件直接上传到后台
        $.ajax({
          type: "post",
          url: "fileUpload",
          data: formData,
          processData: false,
          contentType: false,
          success: function(response) {
            // 将文件框的内容设置成为文件名
            $('#fileName').text(response.data);
          }
        })
      }})
  })
  // 提交表单
  function submit() {
    var goodsType = $('#goodsType').combobox('getValue');
    var lossTime = $('#lossTime').val();
    var lng = $('#lng').val();
    var lat = $('#lat').val();
    var address = $('#lossLocation').val();
    var description = $('#description').textbox('getValue');
    var fileName = $('#fileName').text();
    // 提交到后台
    $.ajax({
      url: "find/update.do",
      type: "post",
      data: {
        "id": "<%=id%>",
        "goodsType": goodsType,
        "findTime": lossTime,
        "lng": lng,
        "lat": lat,
        "address": address,
        "description": description,
        "fileName": fileName
      },
      success: function(response) {
        var message = response.message;
        if (response.code == 0) {
          message += ",请关闭后刷新";
        }
        $.messager.show({
          title:'提示',
          msg: message,
          showType:'show',
          timeout:1500,
          style:{
            right:'',
            top:document.body.scrollTop+document.documentElement.scrollTop,
            bottom:''
          }
        });
      }
    });
  }

</script>
</body>
</html>